<!-- template for the modal component -->
<template>
    <div class="row" style="margin-top: 3%">
        <div class="col-sm-12 col-xs-12" style="text-align: center">
            <a class="btn previous-and-next-btn" @click.stop="clickPrev"
               :class="{'enable-btn': currentPage != 1 , 'disable-btn': currentPage == 1 , 'disabled': currentPage == 1}">
                <span >上一页</span>
            </a>
            <a class="btn page-btn" @click.stop="goPage(1)"
               :class="{'disabled': currentPage==1 ,'enable-btn': currentPage != 1 , 'disable-btn': currentPage == 1}">
                <span><<</span>
            </a>
            <template v-for="page in pages">
                <a class="btn page-btn enable-btn" @click.stop="goPage(page)"  :class="{'current-page-btn': currentPage==page}">
                    <span >{{page}}</span>
                </a>
            </template>
            <a  class="btn page-btn" @click.stop="goPage(pageCount)"
                :class="{'disabled': currentPage==pageCount ,'enable-btn': currentPage != pageCount , 'disable-btn': currentPage == pageCount}">
                <span>>></span>
            </a>
            <a class="btn previous-and-next-btn "  @click.stop="clickNext"
               :class="{'enable-btn': currentPage != pageCount , 'disable-btn': currentPage == pageCount , 'disabled': currentPage == pageCount}">
                <span>下一页</span>
            </a>
            <ul class="pagination">
                <li :class="{disabled: currentPage==1}">
                    <a @click.stop="clickPrev" aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
                <li v-for="page in pages" :class="{active: currentPage==page}" class="paginate-div-4">
                    <span v-if="page == -1">...</span>
                    <a v-else @click.stop="goPage(page)">{{page}}</a>
                </li>

                <li :class="{disabled: currentPage==pageCount}" class="paginate-div-5">
                    <a @click.stop="clickNext" aria-label="Next">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    module.exports = {
        props: {
            'pageCount': {type: Number, required: true},
            'total': {
                type: Number
            },
            'pageRange': {
                type: Number,
            },
            'marginPages': {type: Number, default: 1},
            'currentPage': {type: Number, default: 1}
        },
//        created: function () {
//            this.refresh();
//        },
        data: function () {
            return {
                prevPage: 0,
                nextPage: 1,
                firstPage: 1,
                lastPage: this.pageCount
            };
        },
        methods: {
            clickPrev: function () {
                if (this.currentPage == 1){
                    return false;
                }else{
                    this.$emit('goPage', {page: this.currentPage - 1});
                }
            },
            clickNext: function () {
                if (this.currentPage == this.pageCount){
                    return false;
                }else{
                    this.$emit('goPage', {page: this.currentPage + 1});
                }
            },
            goPage: function (page) {
                this.$emit('goPage', {page: page});
            },
            refresh: function () {


            }
        },
        computed: {
            pages: function(){
                let marginPages = 4;
                let showMarginPageCount = 10;
                let pages = [];
                if (this.pageCount > 10) {
                    if (this.currentPage <= marginPages + 1) {
                        pages = [1, 2, 3, 4, 5, 6, 7, 8, 9];
                    } else if (this.currentPage >= this.pageCount - ( marginPages + 1)) {
                        pages = [this.pageCount - 8, this.pageCount - 7, this.pageCount - 6, this.pageCount - 5, this.pageCount - 4, this.pageCount - 3, this.pageCount - 2, this.pageCount - 1, this.pageCount];
                    } else {
                        for (let i = this.currentPage - marginPages; i <= this.currentPage + marginPages; i++) {
                            pages.push(i);
                        }
                      //  pages.unshift(-1);
                      //  pages.push(-1);
                    }
                } else {
                    for (let i = 1; i <= this.pageCount; i++) {
                        pages.push(i);
                    }
                }

                return pages;
            }
        }
    }
</script>

<style>
    .previous-and-next-btn {
        text-align: center;
        width: 60px;
        height: 25px;
        font-size: 12px;
        border-radius: 50px;
        display: inline-block;
        padding: 0px;
    }
    .disable-btn {
        border: 1px solid #8d8d8d;
        color: #8d8d8d;
    }
    .enable-btn {
        background-color: transparent;
        transition: all .5s;
        border: 1px solid #00a5eb;
        color: #00a5eb;
    }
    .enable-btn:hover {
        background-color: #00a5eb;
        color:#fff;
    }
    .current-page-btn {
        background-color: #00a5eb;
        color:#fff;
    }
    .page-btn {
        text-align: center;
        width: 25px;
        height: 25px;
        display: inline-block;
        padding: 0px;
        border-radius: 50px;
    }
</style>